<script src="__STATIC__/js/echarts.common.min.js" charset="utf-8"></script>
<script src="__STATIC__/js/macarons.js" charset="utf-8"></script>

<style>
    .layui-card-header{
        padding:0 15px;
    }
    .layuiadmin-card-list p.layuiadmin-big-font{
        font-size: 36px;
        line-height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        color: #666;
        padding: 5px 0 10px;
    }
    .layui-card{
        background: #f2f2f2;
    }
    .layadmin-tabsbody-item .layui-card{
        background: #fff;
    }
    .layui-carousel{
        background: #fff;
    }
    .layuiadmin-span-right{
        float:right;
    }
</style>
<div class="layadmin-tabsbody-item layui-show">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">

                    <div class="layui-col-sm6 layui-col-md2">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <span class="layui-badge">用户总数</span>
                            </div>
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">{$total_data.count_user}</p>
                                <p>
                                    帮会成员数量
                                    <span class="layuiadmin-span-right"><i class="layui-icon layui-icon-user"></i> {$total_data.count_user_member}</i></span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-sm6 layui-col-md2">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <span class="layui-badge layui-bg-orange">帮会数量</span>
                            </div>
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">{$total_data.count_gang}</p>
                                <p>
                                    最大帮会人数
                                    <span class="layuiadmin-span-right"><i class="layui-icon layui-icon-flag"></i> {$total_data.count_gang_max}</span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-sm6 layui-col-md2">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <span class="layui-badge layui-bg-green">红包数量</span>
                            </div>
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">{$total_data.count_red_packet}</p>
                                <p>
                                    未拆开红包
                                    <span class="layuiadmin-span-right"><i class="layui-icon layui-icon-rmb"></i> {$total_data.count_red_packet_not_open}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md2">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <span class="layui-badge layui-bg-gray">公众号关注量</span>
                            </div>
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">{$total_data.count_gzh_user}</p>
                                <p>
                                    女的
                                    <span class="layuiadmin-span-right"><i class="layui-icon layui-icon-female"></i> {$total_data.count_gzh_user_women}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md2">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <span class="layui-badge layui-bg-blue">服务器负载</span>
                            </div>
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">{$total_data.loadavg[0]}</p>
                                <p>
                                    5分钟，15分钟
                                    <span class="layuiadmin-span-right"><i class="layui-icon layui-icon-console"></i>{$total_data.loadavg[1]}，{$total_data.loadavg[2]}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md2">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <span class="layui-badge layui-bg-black">订单数量</span>
                            </div>
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">{$total_data.count_order}</p>
                                <p>
                                    成交
                                    <span class="layuiadmin-span-right"><i class="layui-icon layui-icon-template-1"></i> {$total_data.count_order_deal}</span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">数据概览</div>
                            <div class="layui-card-body">
 
                                    <div id="main" style="padding:15px;margin-top:30px;width: 100%;height:400px;"></div>
                                    <div id="main1" style="padding:15px;margin-top:30px;width: 100%;height:400px;"></div>

                            </div>
                        </div> 
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'), 'macarons');

        option = {
            title: {
                text: '近30天用户红包增长曲线'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['用户数量','红包个数','红包总金额']
            },
            toolbox: {
                show: false,
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: {$total_data.date}
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '用户数量',
                type: 'line',
                data: {$total_data.total_user_num},
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            },{
                name: '红包个数',
                type: 'line',
                data: {$total_data.total_red_packet},
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            },{
                name: '红包总金额',
                type: 'line',
                data: {$total_data.total_red_packet_money},
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        };

        myChart.setOption(option);
        var myChart = echarts.init(document.getElementById('main1'), 'macarons');

        option = {
            title: {
                text: '近30天用户红包每天状况'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['用户数量','红包个数','红包总金额']
            },
            toolbox: {
                show: false,
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: {$total_data.date}
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '用户数量',
                type: 'line',
                data: {$total_data.user_num},
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            },{
                name: '红包个数',
                type: 'line',
                data: {$total_data.red_packet},
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            },{
                name: '红包总金额',
                type: 'line',
                data: {$total_data.red_packet_money},
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        };

        myChart.setOption(option);
    </script>